<template>
  <el-card>
    <!-- 头部 -->
    <div class="header">
      <el-row type="flex">
        <el-col :span="12">
          <el-button type="primary" size="small" @click="addHouse">添加房产</el-button>
        </el-col>
        <el-col :span="14">
          <el-select v-model="checkCategory" placeholder="全部分类" style="width: 130px" @change="changeSelect">
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
          <el-select v-model="checkAgents" placeholder="全部经纪" style="width: 130px" @change="changeSelect">
            <el-option
              v-for="item in agentsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-input
            v-model.trim="searchVal"
            placeholder="请输入关键字(值为空时点击筛选为重置)"
            style="width: 322px"
            @input="searchInput"
          />
          <el-button style="width: 80px" @click="searchFn">筛选</el-button>
        </el-col>
      </el-row>
    </div>
    <el-divider />
    <!-- 内容 -->
    <el-row>
      <!-- 表格内容 -->
      <el-table :data="houseData" border style="width: 100%">
        <el-table-column label="封面">
          <template #default="{ row }">
            <img :src="row.image" class="images">
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" />
        <el-table-column label="标签">
          <template #default="{ row }">
            <el-tag v-for="item in row.tags" :key="item" type="success">
              {{ item ? item : "" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="category" label="分类">
          <template #default="{row}">
            {{ row.category?row.category.title:"" }}
          </template>
        </el-table-column>
        <el-table-column prop="agent" label="经纪">
          <template #default="{row}">
            {{ row.agent?row.agent.name:"" }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="图片" align="center">
          <template #default="{row}">
            <img v-for="item in row.photos" :key="item" :src="item" style="width:50px; height:50px">
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button class="editBtn" size="mini" type="primary" @click="updateProp(row.id)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              style="margin-left: 0"
              @click="delProp(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-divider />
    <!-- 分页组件 -->
    <el-row type="flex" align="middle" justify="center">
      <el-pagination
        :page-size="pageSetting._limit"
        :current-page="currentPage"
        layout="prev, pager, next"
        :total="pageTotal"
        @current-change="currentChange"
      />
    </el-row>
    <!-- 弹框组件 -->
    <add-house
      ref="dialogHouse"
      :is-show-dialog.sync="isShowDialog"
      @upData="upDataFn"
    />
  </el-card>
</template>

<script>
// 引入封装接口
import { getHouseList, getPropById, countProp, delProp } from '@/api/property'
// 引入弹框组件
import addHouse from './components/add-house.vue'
import { getAgentsList } from '@/api/agents.js'
import { getCategoryList } from '@/api/modules/category'
export default {
  components: { addHouse },
  data() {
    return {
      isSearch: false,
      checkAgents: '',
      checkCategory: '',
      agentsList: [],
      categoryList: [],
      currentPage: 0,
      pageSetting: {
        _start: 0,
        _limit: 2
      },
      // 表单输入内容
      searchVal: '',
      //   表格内容
      houseData: [],
      // 添加弹窗状态
      isShowDialog: false,
      pageTotal: 0
    }
  },
  // 进入页面的时候,执行
  async created() {
    this.getHouseList()
    const res = await getAgentsList()
    this.agentsList = res.data
    const str = await getCategoryList()
    this.categoryList = str.data
  },
  methods: {
  // 搜索框的监听
    async searchInput() {
      if (!this.searchVal) {
        this.checkAgents = ''
        this.checkCategory = ''
        this.currentPage = 1
        const { data } = await getHouseList({ _start: 0,
          _limit: 2 })
        this.houseData = data
        const res = await countProp()
        this.pageTotal = res.data
      }
    },
    // 搜索的时候筛选
    async searchFn() {
      this.isSearch = true
      if (this.searchVal === '') {
        const { data } = await getHouseList({ _start: 0,
          _limit: 2 })
        // const res = await countProp()
        // this.pageTotal = res.data
        this.houseData = data
        this.currentPage = 1
        this.checkAgents = ''
        this.checkCategory = ''
        const res = await countProp()
        this.pageTotal = res.data
        this.isSearch = false
        return
      }
      if (!this.checkCategory && !this.checkAgents) {
        const { data } = await getHouseList({ title_contains: this.searchVal, _start: 0,
          _limit: 2 })
        this.houseData = data
        const str = await countProp({ title_contains: this.searchVal, ...this.pageSetting })
        this.pageTotal = str.data
        this.currentPage = 1
        return
      }
      if (!this.checkCategory) {
        const { data } = await getHouseList({ agent: this.checkAgents, title_contains: this.searchVal, _start: 0,
          _limit: 2 })
        this.houseData = data
        const str = await countProp({ agent: this.checkAgents, title_contains: this.searchVal, ...this.pageSetting })
        this.pageTotal = str.data
        this.currentPage = 1
        return
      }
      if (!this.checkAgents) {
        const { data } = await getHouseList({ category: this.checkCategory, title_contains: this.searchVal, _start: 0,
          _limit: 2 })
        this.houseData = data
        const str = await countProp({ category: this.checkCategory, title_contains: this.searchVal, ...this.pageSetting })
        this.pageTotal = str.data
        this.currentPage = 1
        return
      }
      const { data } = await getHouseList({ category: this.checkCategory, agent: this.checkAgents, title_contains: this.searchVal, _start: 0,
        _limit: 2 })
      this.houseData = data
      const str = await countProp({ category: this.checkCategory, agent: this.checkAgents, title_contains: this.searchVal, ...this.pageSetting })
      this.pageTotal = str.data
      this.currentPage = 1
    },
    // 选择选项的时候筛选
    async changeSelect() {
      this.isSearch = true
      // 显示筛选后的正确的分页
      if (!this.checkAgents) {
        if (this.searchVal) {
          const { data } = await getHouseList({ category: this.checkCategory, title_contains: this.searchVal, _start: 0,
            _limit: 2 })
          this.houseData = data
          const str = await countProp({ category: this.checkCategory, title_contains: this.searchVal, ...this.pageSetting })
          this.pageTotal = str.data
          this.currentPage = 1
          return
        }
        const { data } = await getHouseList({ category: this.checkCategory, _start: 0,
          _limit: 2 })
        this.houseData = data
        const str = await countProp({ category: this.checkCategory, ...this.pageSetting })
        this.pageTotal = str.data
        this.currentPage = 1
        return
      }
      if (!this.checkCategory) {
        if (this.searchVal) {
          const { data } = await getHouseList({ agent: this.checkAgents, title_contains: this.searchVal, _start: 0,
            _limit: 2 })
          this.houseData = data
          const str = await countProp({ agent: this.checkAgents, title_contains: this.searchVal, ...this.pageSetting })
          this.pageTotal = str.data
          this.currentPage = 1
          return
        }
        const { data } = await getHouseList({ agent: this.checkAgents, _start: 0,
          _limit: 2 })
        this.houseData = data
        const str = await countProp({ agent: this.checkAgents, ...this.pageSetting })
        this.pageTotal = str.data
        this.currentPage = 1
        return
      }
      if (this.searchVal) {
        const { data } = await getHouseList({ category: this.checkCategory, agent: this.checkAgents, title_contains: this.searchVal, _start: 0,
          _limit: 2 })
        this.houseData = data
        const str = await countProp({ category: this.checkCategory, agent: this.checkAgents, title_contains: this.searchVal, ...this.pageSetting })
        this.pageTotal = str.data
        this.currentPage = 1
        return
      }
      const { data } = await getHouseList({ category: this.checkCategory, agent: this.checkAgents, _start: 0,
        _limit: 2 })
      this.houseData = data
      const str = await countProp({ category: this.checkCategory, agent: this.checkAgents, ...this.pageSetting })
      this.pageTotal = str.data
      this.currentPage = 1
    },
    async delProp(id) {
      await this.$confirm('确定要删除嘛?')
      await delProp(id)
      if (this.pageTotal - this.pageSetting._start === 1) {
        this.pageSetting._start = this.pageSetting._start - this.pageSetting._limit
      }
      this.$message.success('操作成功')

      this.getHouseList()
    },
    // 刷新数据
    upDataFn() {
      this.getHouseList()
    },
    // 页面改变触发
    async currentChange(newPage) {
      if (this.isSearch && (this.searchVal !== '' || this.checkAgents !== '' || this.checkCategory !== '')) {
        this.currentPage = newPage
        this.pageSetting._start = (newPage - 1) * this.pageSetting._limit
        const category = this.checkCategory ? this.checkCategory : ''
        const agent = this.checkAgents ? this.checkAgents : ''
        const title_contains = this.searchVal ? this.searchVal : ''
        if (category && agent && title_contains) {
          const res = await getHouseList({ category, agent, title_contains, ...this.pageSetting })
          this.houseData = res.data
          return
        }
        if (category && agent) {
          const res = await getHouseList({ category, agent, ...this.pageSetting })
          this.houseData = res.data
          return
        }
        if (category && title_contains) {
          const res = await getHouseList({ category, title_contains, ...this.pageSetting })
          this.houseData = res.data
          return
        }
        if (title_contains && agent) {
          const res = await getHouseList({ title_contains, agent, ...this.pageSetting })
          this.houseData = res.data
          return
        }
        if (category) {
          const res = await getHouseList({ category, ...this.pageSetting })
          this.houseData = res.data
          return
        }
        if (agent) {
          const res = await getHouseList({ agent, ...this.pageSetting })
          this.houseData = res.data
          return
        }
        if (title_contains) {
          const res = await getHouseList({ title_contains, ...this.pageSetting })
          this.houseData = res.data
          return
        }
        return
      }
      this.currentPage = newPage
      this.pageSetting._start = (newPage - 1) * this.pageSetting._limit
      this.getHouseList()
    },
    // 添加房产点击事件
    async addHouse() {
      await this.$refs.dialogHouse.getAgentsList()
      await this.$refs.dialogHouse.categoryListFn()
      // 调用子组件的方法
      // this.$refs.dialogHouse.getAgentsList()
      // 弹框弹出
      this.isShowDialog = true
    },
    // 点击编辑弹出编辑框
    async updateProp(id) {
      this.isShowDialog = true
      const res = await getPropById(id)
      this.$refs.dialogHouse.formData = res.data
      await this.$refs.dialogHouse.getAgentsList()
      await this.$refs.dialogHouse.categoryListFn()
      await this.$refs.dialogHouse.changerImg()
      await this.$refs.dialogHouse.changerCoverImg()
    },
    // 封装的房产列表请求
    async getHouseList() {
      const { data } = await getHouseList(this.pageSetting)
      const res = await countProp()
      this.pageTotal = res.data
      this.houseData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card{
  margin: 10px;
}
.header{
  margin-bottom: 20px;
}
.editBtn{
  margin-bottom: 10px;
}

.images{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

</style>
